<template>
  <div class="material-preview-popup">
    <div class="content">
      <div class="preview" v-loading="previewLoading">
        <material-preview
          id="preview"
          ref="previewRef"
          :isPreview="isPreview"
          :isCopy="isCopy"
        ></material-preview>
      </div>

      <div class="cover" v-if="isCover">
        <generate-cover :list="getImgSrcs"></generate-cover>
      </div>
    </div>

    <!-- <div class="dialog-footer">
      <el-button plain @click="handleCancel"> 取 消 </el-button>
    </div> -->
  </div>
</template>

<script setup name="material-preview-popup">
import { ref, onMounted, computed } from 'vue';

// components
import MaterialPreview from '@/components/material-preview/index.vue';
import GenerateCover from '@/components/generate-cover/index.vue';

// modal,pinia
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

// api
import { getMateralV2 } from '@/apis/material';

const emit = defineEmits(['on-close']);

const props = defineProps({
  isPreview: {
    type: Boolean,
    default: true,
  },

  isCopy: {
    type: Boolean,
    default: false,
  },

  isCover: {
    type: Boolean,
    default: false,
  },
});

const previewRef = ref();

const previewLoading = ref(false);

const previewHTML = ref('');

const getImgSrcs = computed(() => {
  console.log(previewHTML.value, 'previewHTML.value');

  return extractImageSrcs(previewHTML.value).map((v) => {
    return { imgUrl: v };
  });
});

const initData = async () => {
  const modalData = modalStore.getModal();
  if (modalData._id) {
    previewLoading.value = true;
    const res = await getMateralV2({ _id: modalData._id });
    previewLoading.value = false;
    if (res.code == 0) {
      previewHTML.value = res.data;
      previewRef.value.innerHTML(res.data);
    }
  }

  if (modalData.HTML) {
    previewRef.value.innerHTML(modalData.HTML);
  }
};

const handleCancel = () => {
  modalStore.closeModal();
  emit('on-close');
};

const innerHTML = (data) => {
  previewRef.value.innerHTML(data);
};

function extractImageSrcs(htmlString) {
  // 创建DOM解析器
  const parser = new DOMParser();
  // 将HTML字符串解析为文档对象
  const doc = parser.parseFromString(htmlString, 'text/html');

  // 查找目标容器元素
  // const container = doc.querySelector('.raw-image');
  // if (!container) return []; // 如果目标元素不存在，返回空数组

  // 获取容器内所有图片元素
  const images = doc.querySelectorAll('.raw-image');

  console.log(images, 'images');

  // 提取src属性并过滤无效值
  return Array.from(images)
    .map((img) => img.getAttribute('src'))
    .filter((src) => src !== null && src !== '');
}

onMounted(() => {
  initData();
});

defineExpose({ innerHTML });
</script>

<style lang="scss" scoped>
.material-preview-popup {
  width: 100%;
  height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content {
  display: flex;
  height: 0;
  flex: 1;
}

.preview {
  width: 375px;
  height: 100%;
  // overflow-y: auto;
  flex-shrink: 0;
  margin: auto;
  // flex: 1;
}

.cover {
  flex: 1;
  height: 100%;
  overflow: auto;
  border-left: 1px dashed #d8d8d8;
  margin-left: 5px;
  padding-left: 12px;
  box-sizing: border-box;
}

.dialog-footer {
  justify-content: center !important;
  padding-top: 16px;
}
</style>
